<template>
    <div class="my-wbox my-statistics">
        <el-tabs v-model="activeName">
            <el-tab-pane :label="item.name" v-for="(item, index) in tabData" :name="item.id">
                <MySearch v-if="activeName == index + 1" :searchData="searchData" @listenClick="listenClick">
                    <template #nodeStatus>
                        <div class="lh32">
                            <el-select v-model="nodeStatus" placeholder="请选择审批状态" clearable size="large"
                                @change="onSlotSearch('nodeStatus')">
                                <el-option :label="'待审批'" :value="'1'" />
                                <el-option :label="'同意'" :value="'2'" />
                                <el-option :label="'不同意'" :value="'3'" />
                            </el-select>
                        </div>
                    </template>

                </MySearch>
                <MyTable v-if="activeName == index + 1" :tableData="tableData" @listenClick="listenClick">
                    <template #default="{ slotData, slotColumn }">
                        <div v-if="slotColumn.prop === 'resourceType'">
                            {{ ['有奖举报', '用户举报'][slotData.resourceType - 1] }}
                        </div>
                        <div v-if="slotColumn.prop === 'nodeStatus'">
                            {{ ['待审批', '同意', '不同意'][slotData.nodeStatus - 1] }}
                        </div>
                    </template>
                </MyTable>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
<script setup lang='ts'>
// @ts-ignore
import { ref, reactive, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { FunTime } from '@/global/methods'
import http from '@/http/http'
import { ParentSearch, ParentTable } from '@/interface/index'
import { useStore } from '@/store'
import { SelectObj } from '@/interface/index'

import {
    getUserInfo,
    setSearchFamily,
    getSearchFamily,
    removeSearchFamily,
} from '@/global/session'
import { ElMessage } from 'element-plus'
import { getNewAreaListApi } from '@/views/account/api/accountApi'

//监听加载
const loading = computed(() => {
    return store.getters['loading/getLoad']
})
const router = useRouter()
const store = useStore()

import { ColumnTable } from '@/interface/index'

let tabData = ref<any[]>([])//选项卡
const searchData = reactive<ParentSearch>({
    searchForm: [
        {
            key: 'keyword',
            styleType: 'input',
            label: '关键字:',
            labelShow: true,
            value: '',
            placeholder: '可输入被举报单位名称搜索',
            inputWidth: '400px',
        },
        {
            key: 'nodeStatus',
            styleType: 'slot',
            label: '审批状态:',
            labelShow: true,
            value: '',
        },
    ],
    searchBtn: [

    ],
})
//封装的表格
const tableData = reactive<ParentTable>({
    //表格的一些数据
    listApi: '/manage/admin/reportProgress/processList', //列表搜索接口
    listHttp: 'post', //列表接口方法
    search: {}, //搜索条件
    column: [
    ],
    columnBtn: {
        //操作按钮
        label: '操作',
        align: 'center',
        width: '300',
        btn: [
            { name: 'onDetail', text: '详情', },
            { name: 'onDetail2', text: '审批', hide: (row: any) => row.nodeStatus == '1' },
        ],
    }, //表按钮
    index: true, //true 显示序号
    selection: true,
})

const time = FunTime('', 'YY-MM-DD-Zh')
let title = ref<string>('')
const activeName = ref<number | string>(1)//选项卡变化
watch(
    () => activeName.value,
    () => {
        onPreview()//预览
    }
)

let userInfo = reactive({ roleId: '', townId: '', countryId: '', roleAuth: '', townName: '', countryName: '' })
userInfo = JSON.parse(getUserInfo() as string)
const nodeStatus = ref<string>('')//乡镇
const countryId = ref<string>('')//村组
// @ts-ignore
//预览数据
const onPreview = () => {
    // @ts-ignore
    searchData.searchForm[0].value = ''
    searchData.searchForm[1].value = ''

    tabData.value = [
        {
            name: `办结审批`,
            id: 1
        },
        {
            name: `退回审批`,
            id: 2
        },
        {
            name: `不予立案审批`,
            id: 3
        },
        {
            name: `延期申请审批`,
            id: 4
        },

    ]

    tableData.column = [
        //表头
        { prop: 'acceptCode', label: '工单编号', align: 'left' },
        { prop: 'orderCode', label: '子工单编号', align: 'left' },
        { prop: 'unitName', label: '被举报单位名称', align: 'left', width: '280', tooltip: true },
        { prop: 'address', label: '举报问题地址', align: 'left' },
        { prop: 'reportUser', label: '举报人姓名', width: '130', align: 'left' },
        { prop: 'userTel', label: '举报人电话', align: 'left' },
        { prop: 'nodeStatus', label: '审批状态', width: '150', align: 'left', slot: true },
    ]

    if (activeName.value == '1') {

        tableData.search = {
            flowNodeType: 1
        }
    } else if (activeName.value == '2') {

        tableData.search = {
            flowNodeType: 2
        }
    } else if (activeName.value == '3') {

        tableData.search = {
            flowNodeType: 3
        }
    } else if (activeName.value == '4') {

        tableData.search = {
            flowNodeType: 4
        }
    }

}


onPreview()//预览

//插槽的搜索  keySlot传入对应的key
const onSlotSearch = (keySlot: string) => {
    let obj = searchData.searchForm?.find((t) => t.key === keySlot)
    if (obj) {
        if (keySlot === 'nodeStatus') {
            obj.value = nodeStatus.value
        }
        // isSearch.value = !isSearch.value //是否触发搜索
    }
}
//列表搜索
const onSearch = (val: any) => {
    val.flowNodeType = activeName.value
    tableData.search = val
    //刷新表格
    store.commit('refresh/setRefresh', !store.getters['refresh/getRefresh'])
    //yaohui
    //把搜索条件记录一下
    setSearchFamily(JSON.stringify(tableData.search))
}
//列表搜索重置 清空插槽里面的内容
const onSearchClear = (val: any) => {
    nodeStatus.value = ''
    removeSearchFamily() //清除搜索条件
    onSearch(val)
}


//详情
const onDetail = (row: any) => {
    //把搜索条件记录一下
    setSearchFamily(JSON.stringify(tableData.search))
    router.push({
        name: 'dangerDetail',
        query: { id: row.reportOrderId, isShenpi: '1', shenPiStatus: row.nodeStatus, reportStatus: '2', activeName: activeName.value, shenPiId: row.id },
    })
}
//审批
const onDetail2 = (row: any) => {
    //把搜索条件记录一下
    setSearchFamily(JSON.stringify(tableData.search))
    router.push({
        name: 'dangerDetail',
        query: { id: row.reportOrderId, isShenpi: '1', shenPiStatus: row.nodeStatus, reportStatus: '2', activeName: activeName.value, shenPiId: row.id },
    })
}
// 隐患分配
const onFollowRecord = (row: any) => {
    if (row) {
        dialogData.value = [row.id]
        isShowDialog.value = !isShowDialog.value

    } else {
        if (selection.value.length == 0) {
            ElMessage({ type: 'warning', message: '请选择需要分配的隐患' })
        } else {
            let idArr: any = []
            selection.value.map((item: any) => {
                idArr.push(item.id)
            })
            dialogData.value = idArr
            isShowDialog.value = !isShowDialog.value

        }

    }
}

//分页 一页多少条数
const onListenPageSize = (val: number) => {
    tableData.search.pageSize = val
}
//分页  当前页码
const onListenPageIndex = (val: number) => {
    tableData.search.currentPage = val
}

const isShowBDialog = ref<boolean>(false) //数据转移弹窗是否出现
const isShowDialog = ref<boolean>(false) //数据转移弹窗是否出现
const isShowFDialog = ref<boolean>(false) //数据转移弹窗是否出现
const dialogData: any = ref([]) //传给弹窗的数据
const selection: any = ref([])
//数据转移
const onTransfer = () => {
    if (selection.value.length == 0) {
        ElMessage({ type: 'warning', message: '请选择需要转移的户主' })
    } else {
        isShowDialog.value = !isShowDialog.value
        const arr = selection.value.map((item: any) => item.id)
        dialogData.value = arr
    }
}
const onSelectionChange = (val: any) => {
    selection.value = val
}

//驳回
const onBouhui = (row: any) => {
    dialogData.value = row.id
    isShowBDialog.value = !isShowBDialog.value
}
// 记录回访
const onFollowUp = (row: any) => {
    dialogData.value = row.id
    isShowFDialog.value = !isShowFDialog.value
}

//定义方法对象 注意定义的方法 必须在上面已经申明 所以建议objFun申明和 listenClick方法 写在页面最下面
const objFun = {
    onDetail: onDetail,
    onDetail2: onDetail2,
    onSearch: onSearch,
    onFollowRecord: onFollowRecord,
    onSearchClear: onSearchClear,
    onListenPageSize: onListenPageSize,
    onListenPageIndex: onListenPageIndex,
    onTransfer: onTransfer,
    onSelectionChange: onSelectionChange,
    onBouhui: onBouhui,
    onFollowUp: onFollowUp,
}
// 监听子级表格  传过来的方法禁用
const listenClick = (name: string, val: any) => {
    console.log(name)
    objFun[name](val)
}


</script>
<style scoped lang='scss'>
.my-statistics {
    position: relative;

    &__btn {
        position: absolute;
        right: 20px;
        top: 20px;
        z-index: 9999;
    }

    :deep(.el-tabs__item) {
        height: 60px;
        line-height: 40px;
        font-size: 15px;
    }

    :deep(.el-tabs__item.is-active) {
        font-weight: bold;
    }
}

.my-loading {
    width: 100%;
    height: calc(100vh - 200px);
}

.my-table {
    width: 100%;
    border: 1px solid #ebeef5;

    :deep(th.el-table__cell) {
        background: #f2f2f2;
        color: #111;
    }
}

.my-title01 {
    text-align: center;
    margin-bottom: 10px;
}
</style>